<template>

  <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
  >
    <el-menu-item style="margin-bottom: 20px">
      <el-avatar :icon="UserFilled"/>
      <span style="margin-left: 20px;color: #16285f;font-weight: bold">管理员</span>
    </el-menu-item>

    <router-link to="/notice" :underline="false">
      <el-menu-item index="1">
        <template #title>
          <el-icon><location /></el-icon>
          <span style="font-weight: bold;font-size: 18px">公告管理</span>
        </template>
      </el-menu-item>
    </router-link>

    <router-link to="/studentmanage" :underline="false">
      <el-menu-item index="2">
        <el-icon><icon-menu /></el-icon>
        <span style="font-weight: bold;font-size: 18px">学生管理</span>
      </el-menu-item>
    </router-link>

    <router-link to="/coursemanage" :underline="false">
      <el-menu-item index="3">
        <el-icon><document /></el-icon>
        <span style="font-weight: bold;font-size: 18px">课程管理</span>
      </el-menu-item>
    </router-link>

    <router-link to="/teachermanage" :underline="false">
    <el-menu-item index="4">
      <el-icon><setting /></el-icon>
      <span style="font-weight: bold;font-size: 18px">教师管理</span>
    </el-menu-item>
    </router-link>

  </el-menu>

</template>

<script setup>
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
import { UserFilled } from '@element-plus/icons-vue'

</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-descriptions {
  margin-top: 20px;
}
.cell-item {
  display: flex;
  align-items: center;
}
.margin-top {
  margin-top: 20px;
}
.router-link-active {
  text-decoration: none;
  color: #00CC7E;
}
a{
  text-decoration: none;
}

</style>